<template>
  <div class="better-scroll" ref="bScroll">
    <div class="better-scroll-container">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      BScroll: null
    }
  },
  watch: {
    '$route.path'() {
      this.refresh()
    }
  },
  mounted() {
    setTimeout(() => {
      const bScrollDom = this.$refs.bScroll
      this.BScroll = new BScroll(bScrollDom, {
        click: true,
        bounce: false,
        // scrollbar: true,
        // preventDefault: false,
        tap: true,
        mouseWheel: true
      })
    }, 1000)
  },
  methods: {
    refresh() {
      setTimeout(() => {
        this.BScroll.refresh()
      }, 200)
    }
  }
}
</script>
<style lang="less">
.better-scroll {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
</style>
